<template>
  <div class="table-list">
    <Table border 
      stripe
      :draggable="false" 
      @on-drag-drop="onDragDrop"
      :loading="tableData.loading"
      :columns="tableData.columns" 
      :data="tableData.data" 
      ref="currentRowTable"
      >

    </Table>
    <div id="info"></div>
    <div id="triangle">
      <div class="arrow arrow-down"></div>
      <div class="arrow arrow-up"></div>
    </div>
    <div class="table_page" 
    style=" display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: 25px;">
      <Page  :total="tableData.total" :page-size="10"  @on-change="handlePage" :page-size-opts="page_size" @on-page-size-change="getPagesize"  show-sizer/>
      <span class="total">共{{tableData.total}}条</span>
    </div>
  </div>
</template>

<script>
export default {
  name: "tableList",
  data() {
    $(function(){
      var w = $('body .ivu-table-header th').width();
      var h= $('body .ivu-table-header th').height();
      $('#info').css({
        'width': w,
        "height":h
      });
      var flag = false;
      $("body .ivu-table-header th").unbind("mousedown");
      $('body .ivu-table-header th').mousedown(function() {
        let startIndex = $(this).index();
        let endIndex;
        flag = true;
        $('#info').css({
          display: 'block'
        });
        $('body').addClass('no-select-text');
        $('#info').html($(this).html());
        $(document).mousemove(function(e) {
          if(flag) {
            var e = e || window.event;
            var x = e.clientX - 295 + 'px';
            var y = e.clientY - 90 + 'px';
            $('#info').css({
              left: x,
              top: y
            });
            if(e.preventDefault) {
              e.preventDefault();
            }
            return false;
          }
        });
        $('body .ivu-table-header th').mouseenter(function() {
          endIndex = $(this).index();
          var offsetW = 0;
          var preTd = $(this).prevAll();
          $.each(preTd, function(id, item) {
            offsetW += item.offsetWidth;
          })
          if(endIndex > startIndex) {
            offsetW += $(this)["0"].offsetWidth;
          }
        });
        $(document).mouseup(function() {
          flag = false;
          $('#info').css({
            display: 'none'
          });
          if(endIndex < startIndex) {
            $("body .ivu-table-body tr").each(function(i) {
              $('body .ivu-table-body tr:eq(' + i + ') td:eq(' + endIndex + ')').before($('body .ivu-table-body tr:eq(' + i + ') td:eq(' + startIndex + ')').clone(true));
              $('body .ivu-table-body tr:eq(' + i + ') td:eq(' + (startIndex + 1) + ')').remove();
              $('body .ivu-table-header tr:eq(' + i + ') th:eq(' + endIndex + ')').before($('body .ivu-table-header tr:eq(' + i + ') th:eq(' + startIndex + ')').clone(true));
              $('body .ivu-table-header tr:eq(' + i + ') th:eq(' + (startIndex + 1) + ')').remove();
            });
          } else if(endIndex > startIndex) {
            $("body .ivu-table-body tr").each(function(i) {
              $('body .ivu-table-body tr:eq(' + i + ') td:eq(' + endIndex + ')').after($('body .ivu-table-body tr:eq(' + i + ') td:eq(' + startIndex + ')').clone(true));
              $('body .ivu-table-body tr:eq(' + i + ') td:eq(' + (startIndex) + ')').remove();
              $('body .ivu-table-header tr:eq(' + i + ') th:eq(' + endIndex + ')').after($('body .ivu-table-header tr:eq(' + i + ') th:eq(' + startIndex + ')').clone(true));
              $('body .ivu-table-header tr:eq(' + i + ') th:eq(' + (startIndex) + ')').remove();
            });
          }
          $(document).unbind("mousemove");
          $(document).unbind("mouseup");
          $('body .ivu-table-header th').unbind("mouseenter");
        });
      });
    })
    return {
      page_size:[10,20,30,40,50,60,70,80,90,100] //设置一页显示的数量
    };
  },
  props: {
    tableData:{

    },
  },
  components: {

  },
  computed: {},
  watch: {},
  mounted() {
    
  },
  methods: {
    handlePage(value){
      this.$emit("handlePage" , value)
    },
    getPagesize(size){
      this.$emit("getPagesize" , size)
    },
    swapArr(arr, index1, index2){
      //改变数组下面两个元素的位置
      arr[index1] = arr.splice(index2, 1, arr[index1])[0];
      return arr;
    },
    onDragDrop(a,b){
      this.tableData.data = this.swapArr(this.tableData.data,a,b);
    }
  }
};

</script>

<style scoped>
  .total{
    margin-left: 10px;
  }
  #info {
    background:#f8f8f9;
    border: 1px solid #f8f8f9;
    white-space: nowrap;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    height: 40px !important;
    display: none;
    height: 100%;
    padding: 8px 0;
    text-align: center;
  }
  .no-select-text {
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
  }
  /deep/ .ivu-table-header th{
    cursor: move;
  }
</style>
